<template>
	<view class="page pos-rel" v-if="info">
		<view class="top over-hide "></view>
		<view class="content over-hide pos-abs">
			<view class="container box-b">
				<view class="bac-color-fff info mar-t-20 pad-b-10">
					<view class="flex align-center">
						<view class="tag"></view>
						<view class="font-size-22 mar-l-10 font-bold flex-1">儿童情况</view>
					</view>
					<view class="info-content pad-b-10">
						<view class="mar-t-10 flex font-color-888 align-center">
							<view class="title font-size-15">姓名</view>
							<view>：</view>
							<view class="flex-1 mar-l-10 font-size-16">{{ info.child_usernme }}</view>
						</view>
						<view class="mar-t-10 flex font-color-888 align-center">
							<view class="title font-size-15">性别</view>
							<view>：</view>
							<view class="flex-1 mar-l-10 font-size-16">{{ info.sex_name }}</view>
						</view>
						<view class="mar-t-10 flex font-color-888 align-center">
							<view class="title font-size-15">出生日期</view>
							<view>：</view>
							<view class="flex-1 mar-l-10 font-size-16">{{ transformTime(info.birthday) }}</view>
						</view>
						<view class="mar-t-10 flex font-color-888 align-center">
							<view class="title font-size-15">身体状况</view>
							<view>：</view>
							<view class="flex-1 mar-l-10 font-size-16">{{ info.health }}</view>
						</view>
						<view class="mar-t-10 flex font-color-888 align-center">
							<view class="title font-size-15">身份证号</view>
							<view>：</view>
							<view class="flex-1 mar-l-10 font-size-16">{{ info.card_num }}</view>
						</view>
						<view class="mar-t-10 flex font-color-888 align-center">
							<view class="title font-size-15">就读学校</view>
							<view>：</view>
							<view class="flex-1 mar-l-10 font-size-16">{{ info.school }}</view>
						</view>
						<view class="mar-t-10 flex font-color-888 align-center">
							<view class="title font-size-15">家庭住址</view>
							<view>：</view>
							<view class="flex-1 mar-l-10 font-size-16">{{ info.home_address }}</view>
						</view>
						<view class="mar-t-10 flex flex-column font-color-888">
						    <view class="flex align-center">
						    	<text class="title2 font-size-15">申请理由</text>
								<text class="font-size-15">：</text>
						    </view>
						    <view class="font-size-15 letter-s">{{ info.remark }}</view>
						</view>
						<!-- <transition name="fade">
							<view v-if="show">
								<view class="mar-t-10 flex font-color-888 align-center">
									<view class="title font-size-15">身份证号</view>
									<view>：</view>
									<view class="flex-1 mar-l-10 font-size-16">{{ info.card_num }}</view>
								</view>
								<view class="mar-t-10 flex font-color-888 align-center">
									<view class="title font-size-15">就读学校</view>
									<view>：</view>
									<view class="flex-1 mar-l-10 font-size-16">{{ info.school }}</view>
								</view>
							</view>
						</transition>
						<view class="font-color-bf text-center font-size-14 pad-b-10 mar-t-20 flex align-center justify-center" @click="show = !show">
							<text v-show="!show">展开</text>
							<text v-show="show">返回</text>
							<image src="@/static/icons/down.png" style="width:25px;height:25px" />
						</view> -->
					</view>
					<view style="height:20rpx"></view>
				</view>
				<!-- <view class="bac-color-fff info mar-t-20" v-else>
					<view class="flex align-center">
						<view class="tag"></view>
						<view class="font-size-22 mar-l-10 font-bold flex-1">志愿者资料</view>
						<view class="font-color-fff unlink font-size-13" @click="doCancelHelp" v-if="(info.status != 0 && info.status != 3)">解除关系</view>
					</view>
					<view class="info-content">
						<view class="mar-t-10 flex font-color-888 align-center" v-if="info.pubapply.apply_username">
							<view class="title font-size-15">姓名</view>
							<view>：</view>
							<view class="flex-1 mar-l-10 font-size-16">{{ info.pubapply.apply_username }}</view>
						</view>
						<view class="mar-t-10 flex font-color-888 align-center" v-if="info.pubapply.sex_name">
							<view class="title font-size-15">性别</view>
							<view>：</view>
							<view class="flex-1 mar-l-10 font-size-16">{{info.pubapply.sex_name}}</view>
						</view>
						<view class="mar-t-10 flex font-color-888 align-center" v-if="info.pubapply.mobile">
							<view class="title font-size-15">联系电话</view>
							<view>：</view>
							<view class="flex-1 mar-l-10 font-size-16">{{ info.pubapply.mobile }}</view>
						</view>
						<transition name="fade">
							<view v-if="show">
								<view class="mar-t-10 flex font-color-888 align-center" v-if="info.pubapply.card_num">
									<view class="title font-size-15">身份证号</view>
									<view>：</view>
									<view class="flex-1 mar-l-10 font-size-16">{{ info.pubapply.card_num }}</view>
								</view>
								<view class="mar-t-10 flex font-color-888 align-center" v-if="info.pubapply.education">
									<view class="title font-size-15">学历</view>
									<view>：</view>
									<view class="flex-1 mar-l-10 font-size-16">{{ info.pubapply.education }}</view>
								</view>
								<view class="mar-t-10 flex font-color-888 align-center" v-if="info.pubapply.remark">
									<view class="title font-size-15">备注</view>
									<view>：</view>
									<view class="flex-1 mar-l-10 font-size-16">{{ info.pubapply.remark }}</view>
								</view>
							</view>
						</transition>
						<view class="font-color-bf text-center font-size-14 mar-t-20 flex align-center justify-center" @click="show = !show">
							<text v-show="!show">展开</text>
							<text v-show="show">返回</text>
							<image src="@/static/icons/down.png" style="width:25px;height:25px" />
						</view>
					</view>
				</view> -->
				<view class="font-color-fff confirm-btn letter-s" @click="socialMatchBtn"><text>我要帮扶TA</text></view>
				<view style="height:40px"></view>
			</view>
		</view>
	</view>
</template>

<script>
import { socialDetail,socialMatch } from '@/utils/http';

export default {
	data() {
		return {
			show: false,
			id: '',
			type:'',
			info: '',
			index_page: 0,
			total_page: 1,
			list: []
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.type = option.type
		this.myHelpdetail();
	},
	methods: {
		myHelpdetail() {
			socialDetail({ id: this.id, type: this.type }).then(res => {
				console.log(res);
				this.info = res;
			});
		},
		prviewImage(urls, index) {
			uni.previewImage({
				urls: urls,
				current: index
			});
		},
		//完成帮扶
		socialMatchBtn() {
			let _that = this;
			uni.showModal({
				title: '提示',
				content: '请确认是否要帮扶TA?',
				success: function(res) {
					if (res.confirm) {
						socialMatch({ id: _that.id }).then(res => {
							console.log('socailmatch',res)
							if (res) {
								_that.showModelTip(res.msg,()=>{
									_that.bus.$emit('refreshList')
									console.log('匹配成功')
									uni.navigateBack({
										delta:1
									})
								})
							}
						});
					}
				}
			});
		}
	},
};
</script>

<style scoped>
page {
	background-color: #f4f5fa !important;
}
.top {
	top: 0;
	width: 100%;
	height: 160px;
	background-image: linear-gradient(to right, #65c7f7, #65c7f7);
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
}
.content {
	top: 10px;
	width: 100%;
	height: 100%;
}
.content .info {
	border-radius: 8px;
	padding: 20rpx 20rpx 0 20rpx;
	box-shadow: 2px 2px 5px #e7e5e5d3;
}
.content .info .tag {
	width: 5px;
	height: 20px;
	background-color: #ff5c00;
	border-radius: 8px;
}
.content .info .unlink {
	background-color: #00ce9e;
	padding: 5px 10px;
	border-radius: 8px;
}
.info-content {
	padding: 5px 10px;
}
.info-content .title {
	min-width: 90px;
	text-align: justify;
	text-align-last: justify;
}
.info-content .title2 {
	width: 90px;
	text-align: justify;
	text-align-last: justify;
}
.day-card .day-card-image {
	height: 80px;
	width: 80px;
	background-color: #ccc;
}
.play-day-card {
	height: 50px;
	line-height: 50px;
	width: 50px;
	text-align: center;
	color: #fff;
	background-color: #0088ff;
	border-radius: 50%;
	box-shadow: 0px 0px 5px 3px rgb(230, 227, 227);
}

.help-lag {
	padding: 10px 15px;
	border-radius: 5px;
}
.tag-lag {
	background-color: #0088ff;
	width: 4px;
	height: 20px;
	border-radius: 5px;
}

.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
	opacity: 0;
}
.pinjia-btn {
	background-color: #f2af3c;
	color: #fff;
	padding: 12rpx 20rpx;
	border-radius: 16rpx;
	box-sizing: border-box;
}
.pj-card {
	padding: 8px 12px;
	border-radius: 8px;
}
.pj-card .avatar {
	height: 30px;
	width: 30px;
	background: #fff;
	border-radius: 50%;
}
</style>
